<template>
  <div class="water_wrap">
    <div class="tab">
      <span
        v-for="(item, index) in tabList"
        :key="index"
        :class="{ activeTab: selectNum == index }"
        class="tabTit"
        @click="onHeadMeun(item,index)"
      >
        {{ item }}
      </span>
    </div>
    <!-- <div class="cutRainfall">
      <span
        v-for="(item, index) in tabTitList"
        :key="index"
        :class="{ active: changeNum == index }"
        @click="change(index)"
      >
        {{ item }}
      </span>
    </div> -->
    <div v-if="changeNum == 0" class="water-table m-t-5">
      <MeasuredSsjy />
    </div>
    <div v-if="changeNum == 1" class="water-table m-t-5">
      <Measuredybjy />
    </div>
  </div>
</template>
<script>
import MeasuredSsjy from './MeasuredSsjy.vue'
import Measuredybjy from './Measuredybjy.vue'

export default {
    name: 'Water',
    components: {
        MeasuredSsjy,
        Measuredybjy
    },
    data() {
        return {
            selectNum: 0,
            changeNum: 0,
            tabList:['实测降雨', '预报降雨','洪水分析'],
            tabTitList: ['实测降雨', '预报降雨']
        }
    },
    beforeDestroy() {
        // 离开前还原地图流量查询参数以还原水的颜色
        //this.$eventBus.$off('yubaoshicejiangyu')
    },
    created() {
       let pams = this.$route.params;
       if(pams.pagetyp == '1'){
          let index = pams.ind;
            this.selectNum = index;
            this.changeNum = index
            this.$store.getters.pageState.YB = index ? 'YB_YB' : 'SC_SC'
            this.$store.getters.pageState.YB_SC_ZD = !index

       }else{
        this.$store.getters.pageState.YB = 'SC_SC'
        this.$store.getters.pageState.YB_SC_ZD = true;
       }
        
    },
   mounted() {
    

    },
    methods: {
      onHeadMeun(item,index) {
        let path = '/prediction/Measured' // 降雨信息路由
        if(item == '洪水分析') path = '/prediction/ShortPro/index'
        // 判断是否当前
        if(item=='实测降雨' || item=='预报降雨'){
            this.change(index)
            this.selectNum = index;
        }
        this.$store.dispatch("closePop");
        if (this.$route.path.indexOf(path) !== -1) return;
        this.$router.push({ path: path });
      },
        change(index) {
          console.log(index)
            this.changeNum = index
            this.$store.getters.pageState.YB = index ? 'YB_YB' : 'SC_SC'
            this.$store.getters.pageState.YB_SC_ZD = !index
        }
    }
}
</script>
<style lang="scss" scoped>

.cutRainfall{
  margin: 10px 0 6px;
  text-align: center;

  &>:last-child{
    margin-left: -5px;
  }
  span{
    width: 122px;
    height: 28px;
    display: inline-block;
    background: url(../../../../assets/newimg/button.png) no-repeat  center ; 
    background-size: 100% 100%;
    font-size: 14px;
    text-align: center;
    line-height: 28px;
  }
  .active{
    background: url(../../../../assets/newimg/buttonActive.png) no-repeat  center !important; 
    background-size: 100% 100% !important;

  }
}
.tab {
    width:100%;
    margin-left:0px;
    justify-content: space-between;
    .tabTit{
      font-size: 14px;
      padding:0;
      width: 49%;
      margin:0px;
      box-sizing: border-box;
	 }
	}
.fsc {
  font-size: 12px;
  color: #c3c3c3;
}
.water_wrap {
  width: 100%;
 // height: calc(100% - 36px);
 height:99%;
}
.water-table {
  width: 100%;
  height: calc(100% - 35px);
  // height: 700px;
}
</style>
